class Watcher {
  /**
   * 回调函数去更新视图，而更新视图即操作DOM。所以应在 Compiler 中创建 watcher 对象
   * @param {object} vm Vue 实例
   * @param {string} key $data属性
   * @param {function} cb 回调函数
   */
  constructor(vm, key, cb) {
    this.vm = vm
    // data中的属性名称
    this.key = key
    // 回调函数负责更新视图
    this.cb = cb
    // 把 watcher 对象记录到 Dep 类的静态属性 target
    Dep.target = this
    // 触发 get 方法，在 get 方法中会调用 addSub，将当前 watcher 对象添加到 Dep 中
    this.oldValue = vm[key]
    // 清空 防止重复添加
    Dep.target = null
  }

  // 当数据发生变化是更新视图
  update(){
    let newValue = this.vm[this.key]
    if(this.oldValue === newValue){
      return
    }
    this.cb(newValue)
  }
}